interface ReportsPageProps {
  params: { userId: string };
}

export default function ReportsPage({ params: { userId } }: ReportsPageProps) {
  return (
    <div className="space-y-6">
      {/* 页面标题 */}
      <div>
        <h1 className="text-3xl font-bold text-foreground">Reports</h1>
        <p className="text-muted-foreground mt-1">查看各类报告和统计数据</p>
      </div>

      {/* 报告卡片网格 */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {/* 销售报告 */}
        <div className="bg-card rounded-xl p-6 border shadow-sm">
          <div className="flex items-center space-x-3 mb-4">
            <div className="w-10 h-10 bg-green-100 dark:bg-green-900/20 rounded-lg flex items-center justify-center">
              <span className="text-green-600 dark:text-green-400 text-lg">📊</span>
            </div>
            <div>
              <h3 className="text-lg font-semibold text-foreground">销售报告</h3>
              <p className="text-sm text-muted-foreground">月度销售统计</p>
            </div>
          </div>
          <div className="space-y-2">
            <div className="flex justify-between">
              <span className="text-sm text-muted-foreground">本月销售额</span>
              <span className="text-sm font-medium text-foreground">¥125,430</span>
            </div>
            <div className="flex justify-between">
              <span className="text-sm text-muted-foreground">订单数量</span>
              <span className="text-sm font-medium text-foreground">342</span>
            </div>
          </div>
        </div>

        {/* 用户报告 */}
        <div className="bg-card rounded-xl p-6 border shadow-sm">
          <div className="flex items-center space-x-3 mb-4">
            <div className="w-10 h-10 bg-blue-100 dark:bg-blue-900/20 rounded-lg flex items-center justify-center">
              <span className="text-blue-600 dark:text-blue-400 text-lg">👥</span>
            </div>
            <div>
              <h3 className="text-lg font-semibold text-foreground">用户报告</h3>
              <p className="text-sm text-muted-foreground">用户增长分析</p>
            </div>
          </div>
          <div className="space-y-2">
            <div className="flex justify-between">
              <span className="text-sm text-muted-foreground">新增用户</span>
              <span className="text-sm font-medium text-foreground">186</span>
            </div>
            <div className="flex justify-between">
              <span className="text-sm text-muted-foreground">活跃用户</span>
              <span className="text-sm font-medium text-foreground">1,254</span>
            </div>
          </div>
        </div>

        {/* 财务报告 */}
        <div className="bg-card rounded-xl p-6 border shadow-sm">
          <div className="flex items-center space-x-3 mb-4">
            <div className="w-10 h-10 bg-yellow-100 dark:bg-yellow-900/20 rounded-lg flex items-center justify-center">
              <span className="text-yellow-600 dark:text-yellow-400 text-lg">💰</span>
            </div>
            <div>
              <h3 className="text-lg font-semibold text-foreground">财务报告</h3>
              <p className="text-sm text-muted-foreground">收支统计</p>
            </div>
          </div>
          <div className="space-y-2">
            <div className="flex justify-between">
              <span className="text-sm text-muted-foreground">总收入</span>
              <span className="text-sm font-medium text-foreground">¥98,650</span>
            </div>
            <div className="flex justify-between">
              <span className="text-sm text-muted-foreground">支出</span>
              <span className="text-sm font-medium text-foreground">¥45,230</span>
            </div>
          </div>
        </div>
      </div>

      {/* 详细报告列表 */}
      <div className="bg-card rounded-xl border shadow-sm">
        <div className="p-6 border-b border-border">
          <h2 className="text-xl font-semibold text-foreground">最近生成的报告</h2>
        </div>
        <div className="p-6">
          <div className="space-y-4">
            {[
              { name: '2024年第一季度销售报告', date: '2024-01-15', status: 'completed' },
              { name: '用户行为分析报告', date: '2024-01-10', status: 'completed' },
              { name: '产品性能报告', date: '2024-01-08', status: 'processing' },
              { name: '市场趋势分析', date: '2024-01-05', status: 'completed' },
            ].map((report, index) => (
              <div key={index} className="flex items-center justify-between p-4 bg-muted/50 rounded-lg">
                <div>
                  <h3 className="font-medium text-foreground">{report.name}</h3>
                  <p className="text-sm text-muted-foreground">生成日期: {report.date}</p>
                </div>
                <div className="flex items-center space-x-2">
                  <span className={`px-2 py-1 text-xs font-medium rounded-full ${
                    report.status === 'completed' 
                      ? 'bg-green-100 dark:bg-green-900/20 text-green-800 dark:text-green-400'
                      : 'bg-yellow-100 dark:bg-yellow-900/20 text-yellow-800 dark:text-yellow-400'
                  }`}>
                    {report.status === 'completed' ? '已完成' : '处理中'}
                  </span>
                  <button className="px-3 py-1 text-sm bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors">
                    查看
                  </button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
} 